<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card shadow="never">
          <div class="border">
            <span style="font-size: 17px;font-weight: bold">
              {{
                this.$route.query.type == "KNOWABLE"
                  ? "查看应知应会"
                  : "查看共享文档"
              }}
            </span>
          </div>
          <el-form style="padding:30px 150px">
            <el-form-item label="来源部门："
              >{{ examineList.organizeName }}
            </el-form-item>
            <el-form-item label="共享标题：">
              {{ examineList.title }}
            </el-form-item>
            <el-form-item
              :label="
                this.$route.query.type == 'KNOWABLE'
                  ? '应知应会：'
                  : '共享文档：'
              "
            >
              <div style="display: inline-block">
                <div :key="index" v-for="(item, index) in examineList.files">
                  <a class="article_title_a" @click="previewDetail(item.id)">
                    <i
                      style="margin-right: 3px"
                      :class="iconClass(item.ext)"
                    ></i>
                    {{ item.fileName }}
                  </a>
                  <a
                    style="margin-left:8px;font-size: 15px"
                    class="article_title_a"
                    @click="goDetail(item.id)"
                  >
                    下载
                  </a>
                </div>
              </div>
            </el-form-item>
            <el-form-item style="padding-left:100px ">
              <el-button @click="back" type="primary">返回</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          v-if="
            this.examineList.readRecord &&
              this.examineList.readRecord.length > 0
          "
          shadow="never"
          style="margin-bottom: 10px"
        >
          <div class="border">
            <span style="font-size: 17px;font-weight: bold">读取记录</span>
          </div>
          <el-table style="padding:10px" :data="examineList.readRecord" stripe>
            <el-table-column
              label="姓名"
              align="center"
              width="150"
              prop="userName"
            ></el-table-column>
            <el-table-column label="部门" align="center" prop="organizeName">
            </el-table-column>
            <el-table-column
              label="读取时间"
              width="200"
              align="center"
              prop="readTime"
            ></el-table-column>
            <el-table-column label="读取状态" align="center" prop="readStatus">
              <template slot-scope="scope">
                <sz-badge
                  :type="statusStyle(scope.row)"
                  :value="scope.row.readStatus | keyText('READ_STATUS')"
                ></sz-badge>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card
          v-if="
            this.examineList.auditList && this.examineList.auditList.length > 0
          "
          shadow="never"
        >
          <div class="border">
            <span style="font-size: 17px;font-weight: bold">审核记录</span>
          </div>
          <el-table style="padding:10px" :data="examineList.auditList" stripe>
            <el-table-column
              label="审核人"
              align="center"
              prop="userName"
            ></el-table-column>
            <el-table-column label="审核状态" align="center" prop="status">
              <template slot-scope="scope">
                <sz-badge
                  :type="statusClass(scope.row)"
                  :value="scope.row.status | keyText('DOCUMENT_STATUS')"
                ></sz-badge>
              </template>
            </el-table-column>
            <el-table-column
              label="原因"
              align="center"
              prop="reason"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="审核时间"
              width="200"
              align="center"
              prop="auditTime"
            ></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  created() {
    this.getExamine();
  },
  data() {
    return {
      examineList: {}
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.row) {
        this.getExamine();
      }
    }
  },
  methods: {
    iconClass(name) {
      let cls = "";
      switch (name) {
        case "jpg":
        case "png":
        case "jpeg":
          cls = "fa fa-file-image-o";
          break;
        case "pdf":
        case "PDF":
          cls = "fa fa-file-pdf-o";
          break;
        case "xls":
        case "xlsx":
        case "doc":
        case "docx":
        case "xml":
        case "txt":
          cls = "fa fa-file-excel-o";
          break;
        default:
          cls = "fa fa-file-text-o";
          break;
      }
      return cls;
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.readStatus) {
        case "READ":
          cls = "success";
          break;
        case "UNREAD":
          cls = "warning";
          break;
      }
      return cls;
    },
    statusClass(row) {
      let cls = "";
      switch (row.status) {
        case "COMPLETE":
          cls = "success";
          break;
        case "WAIT_HANDLE":
          cls = "warning";
          break;
        case "REJECT":
          cls = "danger";
          break;
      }
      return cls;
    },
    //返回上一级
    back() {
      this.$router.go(-1);
    },
    //点击预览
    previewDetail(val) {
      this.openTabPage(
        window.api.preFile +
          "?url=" +
          window.api.secretFilePreview +
          val +
          "?token=" +
          window.sessionStorage.getItem("token")
      );
    },
    //下载
    goDetail(val) {
      let obj = this.examineList.files.find(item => item.id === val);
      let fileName = obj.fileName;
      let fileDownload = require("js-file-download");
      this.ExportApi.getFile({ id: val }).then(ret => {
        fileDownload(ret.data, fileName);
        // this.ExportApi.upDbLoadFileStream(
        //   {
        //     saveFileName: fileName,
        //     path: "superiorFile"
        //   },
        //   ret.data
        // ).then(ret => {
        //   this.ExportApi.getFile({ id: ret.data.id }).then(res => {
        //     fileDownload(res.data, ret.data.fileName);
        //   });
        // });
      });
    },
    //获取详情
    getExamine() {
      let id = this.$route.query.row;
      this.API.getDocumentById({ id: id }).then(ret => {
        this.examineList = ret.data;
      });
    }
  }
};
</script>
<style scoped lang="less">
/deep/ .el-card__body {
  padding: 0;
}

.border {
  padding: 19px 0 19px 20px;
  border-bottom: 1px solid rgba(224, 238, 249, 1);
}

.border1 {
  padding: 19px 0 0px 20px;
  border-bottom: 1px solid rgba(224, 238, 249, 1);
}

/deep/ .el-form-item__label {
  font-size: 16px;
  font-weight: 600;
}

/deep/ .el-form-item__content {
  font-size: 16px;
}

/deep/ .el-table td,
.el-table th.is-leaf {
  border-bottom: 0;
}
</style>
